<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	
	
	<body>
		
		
		<div  id="app">
			<!-- 2.添加路由连接
				Vue中默认添加路由规则  
					1.router-link会默认渲染为a标签
					2.to属性默认渲染为 href标签
			 -->
			<router-link to="/user">用户</router-link>
			<router-link to="/dog">狗</router-link>
			
			
			<!-- 3.定义路由填充位
				将来通过路由匹配到的组件,将通过路由填充位进行展现
			 -->
			<router-view ></router-view>
		</div>
		
	    
		<script  src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
		<script  src="../js/vue-router.js"></script>
		<script>
			
			
			
			
			
			//4.定义user组件
			const user = {
				template: '<h1>我是User组件</h1>'
			}
			
			//定义dog组件
			const dog = {
				template: `<h1>我是Dog组件</h1>`
			}
			
			
			//路由映射
			const router = new VueRouter({
				//routes 定义路由规则
			    routes: [
				    {path:"/user",redirect: "http://127.0.0.1:8848/demoWeb/userList.html"},
					{path:"/dog",component: dog}
				]
			})
			
			
		
			
			const  app=new Vue({
				el: "#app",
				// components: {
				// 	home,
				// 	dog
				// }
				router
			})
			
			
		</script>
		
		
		
		
	</body>
</html>
